<template>
  <div class="admin-container">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="250px" class="admin-sidebar">
        <div class="sidebar-header">
          <div class="logo">
            <el-icon class="logo-icon"><Monitor /></el-icon>
          <h2>管理后台</h2>
          </div>
          <p>腾讯视频管理系统</p>
          <div class="admin-info">
            <el-avatar :size="40" :src="adminUser?.avatar">
              {{ adminUser?.name?.charAt(0) || 'A' }}
            </el-avatar>
            <div class="admin-details">
              <span class="admin-name">{{ adminUser?.name || '管理员' }}</span>
              <span class="admin-role">超级管理员</span>
            </div>
          </div>
        </div>
        
        <el-menu
          :default-active="activeMenu"
          class="admin-menu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="dashboard">
            <el-icon><Monitor /></el-icon>
            <span>仪表盘</span>
          </el-menu-item>
          
          <el-menu-item index="users">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          
          <el-menu-item index="videos">
            <el-icon><CaretRight /></el-icon>
            <span>视频管理</span>
          </el-menu-item>
          
          <el-menu-item index="categories">
            <el-icon><Grid /></el-icon>
            <span>分类管理</span>
          </el-menu-item>
          
          <el-menu-item index="banners">
            <el-icon><Picture /></el-icon>
            <span>轮播图管理</span>
          </el-menu-item>
          
          <el-menu-item index="comments">
            <el-icon><ChatDotRound /></el-icon>
            <span>评论管理</span>
          </el-menu-item>
          
          <el-menu-item index="settings">
            <el-icon><Setting /></el-icon>
            <span>系统设置</span>
          </el-menu-item>
          
          <el-menu-item index="logs">
            <el-icon><Document /></el-icon>
            <span>系统日志</span>
          </el-menu-item>
          
          <el-menu-item index="health">
            <el-icon><Monitor /></el-icon>
            <span>系统监控</span>
          </el-menu-item>
        </el-menu>
        
        <div class="sidebar-footer">
          <el-button type="danger" @click="logout" plain>
            <el-icon><SwitchButton /></el-icon>
            退出登录
          </el-button>
        </div>
      </el-aside>

      <!-- 主内容区 -->
      <el-container>
        <!-- 顶部导航 -->
        <el-header class="admin-header">
          <div class="header-left">
            <h3>{{ getPageTitle() }}</h3>
          </div>
          <div class="header-right">
            <el-dropdown @command="handleCommand">
              <span class="admin-info">
                <el-icon><Avatar /></el-icon>
                管理员
                <el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人资料</el-dropdown-item>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 内容区域 -->
        <el-main class="admin-main">
          <!-- 调试信息 -->
          <div style="position: fixed; top: 60px; right: 20px; background: red; color: white; padding: 10px; z-index: 9999; border-radius: 5px;">
            当前页面: {{ activeMenu }}
          </div>
          
          <!-- 仪表盘 -->
          <div v-if="activeMenu === 'dashboard'" class="dashboard-content">
            <div style="background: green; color: white; padding: 20px; margin: 20px;">
              调试信息：当前页面是仪表板 (activeMenu = {{ activeMenu }})
            </div>
            <!-- 欢迎区域 -->
            <div class="welcome-section">
              <div class="welcome-card">
                <div class="welcome-content">
                  <h1 class="welcome-title">
                    <el-icon class="welcome-icon"><Monitor /></el-icon>
                    欢迎回来，{{ adminUser.name }}！
                  </h1>
                  <p class="welcome-subtitle">腾讯视频管理系统 - 让内容管理更简单</p>
                  <div class="welcome-actions">
                    <el-button type="primary" size="large" @click="goToAddVideo">
                      <el-icon><Plus /></el-icon>
                      添加视频
                    </el-button>
                    <el-button type="success" size="large" @click="goToAddUser">
                      <el-icon><User /></el-icon>
                      添加用户
                    </el-button>
                    <el-button type="info" size="large" @click="goToSettings">
                      <el-icon><Setting /></el-icon>
                      系统设置
                    </el-button>
                  </div>
                </div>
                <div class="welcome-image">
                  <el-icon class="dashboard-icon"><Monitor /></el-icon>
                </div>
              </div>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-section">
            <el-row :gutter="20">
              <el-col :span="6">
                  <el-card class="stat-card users-card" shadow="hover">
                  <div class="stat-content">
                      <div class="stat-icon">
                      <el-icon><User /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ stats.totalUsers }}</div>
                        <div class="stat-label">总用户数</div>
                        <div class="stat-change positive">
                          <el-icon><ArrowUp /></el-icon>
                          +12.5%
                        </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                  <el-card class="stat-card videos-card" shadow="hover">
                  <div class="stat-content">
                      <div class="stat-icon">
                        <el-icon><VideoPlay /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ stats.totalVideos }}</div>
                        <div class="stat-label">总视频数</div>
                        <div class="stat-change positive">
                          <el-icon><ArrowUp /></el-icon>
                          +8.3%
                        </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                  <el-card class="stat-card categories-card" shadow="hover">
                  <div class="stat-content">
                      <div class="stat-icon">
                        <el-icon><Grid /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ stats.totalCategories }}</div>
                        <div class="stat-label">分类数量</div>
                        <div class="stat-change neutral">
                          <el-icon><Minus /></el-icon>
                          0%
                        </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                  <el-card class="stat-card comments-card" shadow="hover">
                  <div class="stat-content">
                      <div class="stat-icon">
                      <el-icon><ChatDotRound /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ stats.totalComments }}</div>
                        <div class="stat-label">评论总数</div>
                        <div class="stat-change positive">
                          <el-icon><ArrowUp /></el-icon>
                          +15.7%
                        </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            </div>

            <!-- 快速操作 -->
            <div class="quick-actions-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>快速操作</span>
                    <el-button type="primary" @click="refreshAll">
                      <el-icon><Refresh /></el-icon>
                      刷新数据
                    </el-button>
                  </div>
                </template>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <div class="quick-action-item" @click="goToVideos" @click.stop>
                      <div class="action-icon videos-icon">
                        <el-icon><VideoPlay /></el-icon>
                      </div>
                      <div class="action-content">
                        <h3>视频管理</h3>
                        <p>管理所有视频内容，包括上传、编辑、删除</p>
                        <el-button type="primary" plain @click.stop>进入管理</el-button>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="quick-action-item" @click="goToUsers" @click.stop>
                      <div class="action-icon users-icon">
                        <el-icon><User /></el-icon>
                      </div>
                      <div class="action-content">
                        <h3>用户管理</h3>
                        <p>管理系统用户，权限控制和用户信息</p>
                        <el-button type="success" plain @click.stop>进入管理</el-button>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="quick-action-item" @click="goToCategories" @click.stop>
                      <div class="action-icon categories-icon">
                        <el-icon><Grid /></el-icon>
                      </div>
                      <div class="action-content">
                        <h3>分类管理</h3>
                        <p>管理视频分类，创建和编辑分类</p>
                        <el-button type="warning" plain @click.stop>进入管理</el-button>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 20px;">
                  <el-col :span="8">
                    <div class="quick-action-item" @click="goToComments" @click.stop>
                      <div class="action-icon comments-icon">
                        <el-icon><ChatDotRound /></el-icon>
                      </div>
                      <div class="action-content">
                        <h3>评论管理</h3>
                        <p>管理用户评论，审核和删除评论</p>
                        <el-button type="info" plain @click.stop>进入管理</el-button>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="quick-action-item" @click="goToBanners" @click.stop>
                      <div class="action-icon banners-icon">
                        <el-icon><Picture /></el-icon>
                      </div>
                      <div class="action-content">
                        <h3>轮播图管理</h3>
                        <p>管理首页轮播图，上传和排序</p>
                        <el-button type="danger" plain @click.stop>进入管理</el-button>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="quick-action-item" @click="goToSettings" @click.stop>
                      <div class="action-icon settings-icon">
                        <el-icon><Setting /></el-icon>
                      </div>
                      <div class="action-content">
                        <h3>系统设置</h3>
                        <p>系统配置和参数设置</p>
                        <el-button type="primary" plain @click.stop>进入设置</el-button>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </div>

            <!-- 最近活动 -->
            <div class="recent-activity-section">
              <el-card>
              <template #header>
                  <div class="card-header">
                <span>最近活动</span>
                    <el-button @click="loadRecentActivity">
                      <el-icon><Refresh /></el-icon>
                      刷新
                    </el-button>
                  </div>
              </template>
              <el-timeline>
                <el-timeline-item
                    v-for="(activity, index) in recentActivity"
                    :key="index"
                  :timestamp="activity.time"
                    :type="activity.type"
                >
                    <el-card>
                      <h4>{{ activity.title }}</h4>
                      <p>{{ activity.description }}</p>
                    </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-card>
            </div>
          </div>

          <!-- 用户管理 -->
          <div v-if="activeMenu === 'users'" class="users-management">
            <div style="background: red; color: white; padding: 20px; margin: 20px;">
              调试信息：当前页面是用户管理 (activeMenu = {{ activeMenu }})
            </div>
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>用户管理</span>
                  <div style="display: flex; gap: 10px;">
                    <el-button type="primary" @click="showAddUser = true" style="background: #409EFF; color: white; border: none; padding: 8px 16px; border-radius: 4px;">
                    <el-icon><Plus /></el-icon>
                    添加用户
                  </el-button>
                    <div style="background: yellow; color: black; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
                      调试：添加按钮
                    </div>
                  </div>
                </div>
              </template>
              
              <!-- 搜索和筛选 -->
              <div class="filter-section">
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-input
                      v-model="userSearchKeyword"
                      placeholder="搜索用户名或邮箱"
                      clearable
                      @input="searchUsers"
                    >
                      <template #prefix>
                        <el-icon><Search /></el-icon>
                      </template>
                    </el-input>
                  </el-col>
                  <el-col :span="4">
                    <el-select v-model="userStatusFilter" placeholder="选择状态" clearable>
                      <el-option label="全部状态" value="" />
                      <el-option label="正常" value="active" />
                      <el-option label="禁用" value="disabled" />
                      <el-option label="待审核" value="pending" />
                    </el-select>
                  </el-col>
                  <el-col :span="4">
                    <el-select v-model="userLevelFilter" placeholder="选择等级" clearable>
                      <el-option label="全部等级" value="" />
                      <el-option label="普通用户" value="user" />
                      <el-option label="VIP用户" value="vip" />
                      <el-option label="管理员" value="admin" />
                    </el-select>
                  </el-col>
                  <el-col :span="4">
                    <el-button type="primary" @click="loadUsers">
                      <el-icon><Refresh /></el-icon>
                      刷新
                    </el-button>
                  </el-col>
                </el-row>
              </div>

              <el-table 
                :data="filteredUsers" 
                style="width: 100%"
                @selection-change="handleUserSelectionChange"
                v-loading="userLoading"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column label="头像" width="80">
                  <template #default="scope">
                    <el-avatar :src="scope.row.avatar" :size="40">
                      {{ scope.row.name?.charAt(0) }}
                    </el-avatar>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="用户名" min-width="200">
                  <template #default="scope">
                    <div class="user-content">
                      <div class="user-name">{{ scope.row.name }}</div>
                      <div class="user-actions" style="margin-top: 8px; display: flex; gap: 8px;">
                        <el-button 
                          size="mini" 
                          type="primary" 
                          @click="editUser(scope.row)"
                          style="background: #409EFF; color: white; border: none; padding: 4px 8px; font-size: 12px;"
                        >
                          编辑
                        </el-button>
                        <el-button 
                          size="mini" 
                          type="danger" 
                          @click="deleteUser(scope.row)"
                          style="background: #F56C6C; color: white; border: none; padding: 4px 8px; font-size: 12px;"
                        >
                          删除
                        </el-button>
                        <el-button 
                          size="mini" 
                          :type="scope.row.status === 'active' ? 'warning' : 'success'"
                          @click="toggleUserStatus(scope.row)"
                          style="border: none; padding: 4px 8px; font-size: 12px;"
                        >
                          {{ scope.row.status === 'active' ? '禁用' : '启用' }}
                        </el-button>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="email" label="邮箱" min-width="180" />
                <el-table-column prop="level" label="等级" width="100">
                  <template #default="scope">
                    <el-tag :type="getUserLevelType(scope.row.level)">
                      {{ getUserLevelText(scope.row.level) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                  <template #default="scope">
                    <el-tag :type="getUserStatusType(scope.row.status)">
                      {{ getUserStatusText(scope.row.status) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="created_at" label="注册时间" width="150">
                  <template #default="scope">
                    {{ formatDate(scope.row.created_at) }}
                  </template>
                </el-table-column>
                <el-table-column prop="last_login" label="最后登录" width="150">
                  <template #default="scope">
                    {{ scope.row.last_login ? formatDate(scope.row.last_login) : '从未登录' }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100" fixed="right">
                  <template #default>
                    <div style="text-align: center; color: #999; font-size: 12px;">
                      操作按钮在用户名中
                    </div>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页 -->
              <div class="pagination-section">
                <el-pagination
                  :current-page="userCurrentPage"
                  :page-size="userPageSize"
                  :page-sizes="[10, 20, 50, 100]"
                  :total="userTotal"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleUserSizeChange"
                  @current-change="handleUserCurrentChange"
                />
              </div>
            </el-card>
          </div>

          <!-- 视频管理 -->
          <div v-if="activeMenu === 'videos'" class="videos-management">
            <div style="background: blue; color: white; padding: 20px; margin: 20px;">
              调试信息：当前页面是视频管理 (activeMenu = {{ activeMenu }})
            </div>
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>视频管理</span>
                  <div>
                    <el-button type="success" @click="batchSetFeatured" :disabled="selectedVideos.length === 0">
                      批量推荐
                    </el-button>
                    <el-button type="warning" @click="batchUnsetFeatured" :disabled="selectedVideos.length === 0">
                      取消推荐
                    </el-button>
                  <el-button type="primary" @click="showAddVideoDialog = true">
                    <el-icon><Plus /></el-icon>
                    添加视频
                  </el-button>
                  </div>
                </div>
              </template>
              
              <!-- 搜索和筛选 -->
              <div class="filter-section">
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-input
                      v-model="videoSearchKeyword"
                      placeholder="搜索视频标题"
                      clearable
                      @input="searchVideos"
                    >
                      <template #prefix>
                        <el-icon><Search /></el-icon>
                      </template>
                    </el-input>
                  </el-col>
                  <el-col :span="4">
                    <el-select v-model="videoCategoryFilter" placeholder="选择分类" clearable>
                      <el-option label="全部分类" value="" />
                      <el-option
                        v-for="category in categories"
                        :key="category.id"
                        :label="category.name"
                        :value="category.id"
                      />
                    </el-select>
                  </el-col>
                  <el-col :span="4">
                    <el-select v-model="videoStatusFilter" placeholder="选择状态" clearable>
                      <el-option label="全部状态" value="" />
                      <el-option label="已发布" value="published" />
                      <el-option label="草稿" value="draft" />
                      <el-option label="审核中" value="pending" />
                    </el-select>
                  </el-col>
                  <el-col :span="4">
                    <el-button type="primary" @click="loadVideos">
                      <el-icon><Refresh /></el-icon>
                      刷新
                    </el-button>
                  </el-col>
                </el-row>
                
                <!-- 操作按钮行 -->
                <el-row :gutter="20" style="margin-top: 15px;">
                  <el-col :span="24">
                    <div style="display: flex; gap: 12px; align-items: center;">
                      <el-button type="success" @click="showAddVideoDialog = true">
                        <el-icon><Plus /></el-icon>
                        增加视频
                      </el-button>
                      <el-button type="warning" @click="batchUnsetFeatured" :disabled="selectedVideos.length === 0">
                        <el-icon><Star /></el-icon>
                        批量取消推荐
                      </el-button>
                      <el-button type="primary" @click="batchSetFeatured" :disabled="selectedVideos.length === 0">
                        <el-icon><Star /></el-icon>
                        批量设为推荐
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </div>

              <el-table 
                :data="filteredVideos" 
                style="width: 100%"
                @selection-change="handleVideoSelectionChange"
                v-loading="videoLoading"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column label="缩略图" width="120">
                  <template #default="scope">
                    <img v-if="scope.row.thumbnail" :src="scope.row.thumbnail" :alt="scope.row.title" style="width: 80px; height: 45px; object-fit: cover; border-radius: 4px;" />
                    <span v-else style="color: #999;">无图片</span>
                  </template>
                </el-table-column>
                <el-table-column prop="title" label="标题" min-width="300">
                  <template #default="scope">
                    <div class="video-content">
                      <div class="video-title">{{ scope.row.title }}</div>
                      <div class="video-actions" style="margin-top: 8px; display: flex; gap: 8px;">
                        <el-button 
                          size="mini" 
                          type="primary" 
                          @click="editVideo(scope.row)"
                          style="background: #409EFF; color: white; border: none; padding: 4px 8px; font-size: 12px;"
                        >
                          编辑
                        </el-button>
                        <el-button 
                          size="mini" 
                          type="danger" 
                          @click="deleteVideo(scope.row)"
                          style="background: #F56C6C; color: white; border: none; padding: 4px 8px; font-size: 12px;"
                        >
                          删除
                        </el-button>
                        <el-button 
                          size="mini" 
                          :type="scope.row.is_featured ? 'warning' : 'success'"
                          @click="toggleFeatured(scope.row)"
                          style="border: none; padding: 4px 8px; font-size: 12px;"
                        >
                          {{ scope.row.is_featured ? '取消推荐' : '设为推荐' }}
                        </el-button>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="category.name" label="分类" width="100" />
                <el-table-column prop="views" label="播放量" width="100">
                  <template #default="scope">
                    {{ formatViews(scope.row.views) }}
                  </template>
                </el-table-column>
                <el-table-column prop="likes" label="点赞数" width="100" />
                <el-table-column prop="duration" label="时长" width="100" />
                <el-table-column prop="status" label="状态" width="100">
                  <template #default="scope">
                    <el-tag :type="getVideoStatusType(scope.row.status)">
                      {{ getVideoStatusText(scope.row.status) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="is_featured" label="推荐" width="80">
                  <template #default="scope">
                    <el-icon v-if="scope.row.is_featured" color="#f39c12"><Star /></el-icon>
                    <span v-else>-</span>
                  </template>
                </el-table-column>
                <el-table-column prop="created_at" label="创建时间" width="150">
                  <template #default="scope">
                    {{ formatDate(scope.row.created_at) }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100" fixed="right">
                  <template #default>
                    <div style="text-align: center; color: #999; font-size: 12px;">
                      操作按钮在标题中
                    </div>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页 -->
              <div class="pagination-section">
                <el-pagination
                  :current-page="videoCurrentPage"
                  :page-size="videoPageSize"
                  :page-sizes="[10, 20, 50, 100]"
                  :total="videoTotal"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleVideoSizeChange"
                  @current-change="handleVideoCurrentChange"
                />
              </div>
            </el-card>
          </div>

          <!-- 分类管理 -->
          <div v-if="activeMenu === 'categories'" class="categories-management">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>分类管理</span>
                  <el-button type="primary" @click="showAddCategory = true">
                    <el-icon><Plus /></el-icon>
                    添加分类
                  </el-button>
                </div>
              </template>
              
              <!-- 搜索和筛选 -->
              <div class="filter-section">
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-input
                      v-model="categorySearchKeyword"
                      placeholder="搜索分类名称"
                      clearable
                      @input="searchCategories"
                    >
                      <template #prefix>
                        <el-icon><Search /></el-icon>
                      </template>
                    </el-input>
                  </el-col>
                  <el-col :span="4">
                    <el-button type="primary" @click="loadCategories">
                      <el-icon><Refresh /></el-icon>
                      刷新
                    </el-button>
                  </el-col>
                </el-row>
              </div>

              <el-table 
                :data="filteredCategories" 
                style="width: 100%"
                @selection-change="handleCategorySelectionChange"
                v-loading="categoryLoading"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column prop="name" label="分类名称" min-width="150" />
                <el-table-column prop="description" label="描述" min-width="200" />
                <el-table-column prop="video_count" label="视频数量" width="100">
                  <template #default="scope">
                    <el-tag type="info">{{ scope.row.video_count || 0 }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="sort_order" label="排序" width="100" />
                <el-table-column prop="is_active" label="状态" width="100">
                  <template #default="scope">
                    <el-tag :type="scope.row.is_active ? 'success' : 'danger'">
                      {{ scope.row.is_active ? '启用' : '禁用' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="created_at" label="创建时间" width="150">
                  <template #default="scope">
                    {{ formatDate(scope.row.created_at) }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="200" fixed="right">
                  <template #default="scope">
                    <el-button size="small" @click="editCategory(scope.row)">编辑</el-button>
                    <el-button 
                      size="small" 
                      :type="scope.row.is_active ? 'warning' : 'success'"
                      @click="toggleCategoryStatus(scope.row)"
                    >
                      {{ scope.row.is_active ? '禁用' : '启用' }}
                    </el-button>
                    <el-button size="small" type="danger" @click="deleteCategory(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页 -->
              <div class="pagination-section">
                <el-pagination
                  :current-page="categoryCurrentPage"
                  :page-size="categoryPageSize"
                  :page-sizes="[10, 20, 50, 100]"
                  :total="categoryTotal"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleCategorySizeChange"
                  @current-change="handleCategoryCurrentChange"
                />
              </div>
            </el-card>
          </div>

          <!-- 轮播图管理 -->
          <div v-if="activeMenu === 'banners'" class="banners-management">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>轮播图管理</span>
                  <el-button type="primary" @click="showAddBannerDialog = true">
                    <el-icon><Plus /></el-icon>
                    添加轮播图
                  </el-button>
                </div>
              </template>
              
              <!-- 搜索和筛选 -->
              <div class="filter-section">
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-input
                      v-model="bannerSearchKeyword"
                      placeholder="搜索轮播图标题"
                      clearable
                      @input="searchBanners"
                    >
                      <template #prefix>
                        <el-icon><Search /></el-icon>
                      </template>
                    </el-input>
                  </el-col>
                  <el-col :span="4">
                    <el-select v-model="bannerStatusFilter" placeholder="选择状态" clearable>
                      <el-option label="全部状态" value="" />
                      <el-option label="启用" value="true" />
                      <el-option label="禁用" value="false" />
                    </el-select>
                  </el-col>
                  <el-col :span="4">
                    <el-button type="primary" @click="loadBanners">
                      <el-icon><Refresh /></el-icon>
                      刷新
                    </el-button>
                  </el-col>
                </el-row>
              </div>

              <el-table 
                :data="filteredBanners" 
                style="width: 100%"
                @selection-change="handleBannerSelectionChange"
                v-loading="bannerLoading"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column prop="title" label="标题" min-width="250">
                  <template #default="scope">
                    <div class="banner-content">
                      <div class="banner-title">{{ scope.row.title }}</div>
                      <div class="banner-actions" style="margin-top: 8px; display: flex; gap: 8px;">
                        <el-button 
                          size="mini" 
                          type="primary" 
                          @click="editBanner(scope.row)"
                          style="background: #409EFF; color: white; border: none; padding: 4px 8px; font-size: 12px;"
                        >
                          编辑
                        </el-button>
                        <el-button 
                          size="mini" 
                          type="danger" 
                          @click="deleteBanner(scope.row)"
                          style="background: #F56C6C; color: white; border: none; padding: 4px 8px; font-size: 12px;"
                        >
                          删除
                        </el-button>
                        <el-button 
                          size="mini" 
                          :type="scope.row.is_active ? 'warning' : 'success'"
                          @click="toggleBannerStatus(scope.row)"
                          style="border: none; padding: 4px 8px; font-size: 12px;"
                        >
                          {{ scope.row.is_active ? '禁用' : '启用' }}
                        </el-button>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="description" label="描述" min-width="200" />
                <el-table-column label="图片" width="120">
                  <template #default="scope">
                    <img v-if="scope.row.image" :src="scope.row.image" :alt="scope.row.title" style="width: 80px; height: 45px; object-fit: cover; border-radius: 4px;" />
                    <span v-else style="color: #999;">无图片</span>
                  </template>
                </el-table-column>
                <el-table-column prop="link" label="链接" width="150">
                  <template #default="scope">
                    <el-link :href="scope.row.link" target="_blank" v-if="scope.row.link">
                      {{ scope.row.link }}
                    </el-link>
                    <span v-else style="color: #999;">无链接</span>
                  </template>
                </el-table-column>
                <el-table-column prop="sort_order" label="排序" width="80" />
                <el-table-column prop="is_active" label="状态" width="100">
                  <template #default="scope">
                    <el-tag :type="scope.row.is_active ? 'success' : 'danger'">
                      {{ scope.row.is_active ? '启用' : '禁用' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="created_at" label="创建时间" width="150">
                  <template #default="scope">
                    {{ formatDate(scope.row.created_at) }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100" fixed="right">
                  <template #default>
                    <div style="text-align: center; color: #999; font-size: 12px;">
                      操作按钮在标题中
                    </div>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页 -->
              <div class="pagination-section">
                <el-pagination
                  :current-page="bannerCurrentPage"
                  :page-size="bannerPageSize"
                  :page-sizes="[10, 20, 50, 100]"
                  :total="bannerTotal"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleBannerSizeChange"
                  @current-change="handleBannerCurrentChange"
                />
              </div>
            </el-card>
          </div>

          <!-- 评论管理 -->
          <div v-if="activeMenu === 'comments'" class="comments-management">
            <el-card>
              <template #header>
                <div class="card-header">
                <span>评论管理</span>
                  <div>
                    <el-button type="success" @click="batchApproveComments" :disabled="selectedComments.length === 0">
                      <el-icon><Check /></el-icon>
                      批量审核
                    </el-button>
                    <el-button type="warning" @click="batchRejectComments" :disabled="selectedComments.length === 0">
                      <el-icon><Close /></el-icon>
                      批量拒绝
                    </el-button>
                  </div>
                </div>
              </template>
              
              <!-- 搜索和筛选 -->
              <div class="filter-section">
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-input
                      v-model="commentSearchKeyword"
                      placeholder="搜索评论内容"
                      clearable
                      @input="searchComments"
                    >
                      <template #prefix>
                        <el-icon><Search /></el-icon>
                      </template>
                    </el-input>
                  </el-col>
                  <el-col :span="4">
                    <el-select v-model="commentStatusFilter" placeholder="选择状态" clearable>
                      <el-option label="全部状态" value="" />
                      <el-option label="已审核" value="approved" />
                      <el-option label="待审核" value="pending" />
                      <el-option label="已拒绝" value="rejected" />
                    </el-select>
                  </el-col>
                  <el-col :span="4">
                    <el-select v-model="commentVideoFilter" placeholder="选择视频" clearable>
                      <el-option label="全部视频" value="" />
                      <el-option
                        v-for="video in videos"
                        :key="video.id"
                        :label="video.title"
                        :value="video.id"
                      />
                    </el-select>
                  </el-col>
                  <el-col :span="4">
                    <el-button type="primary" @click="loadComments">
                      <el-icon><Refresh /></el-icon>
                      刷新
                    </el-button>
                  </el-col>
                </el-row>
              </div>

              <el-table 
                :data="filteredComments" 
                style="width: 100%"
                @selection-change="handleCommentSelectionChange"
                v-loading="commentLoading"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column label="用户" width="120">
                  <template #default="scope">
                    <div class="user-info">
                      <el-avatar :src="scope.row.user?.avatar" :size="30">
                        {{ scope.row.user?.name?.charAt(0) }}
                      </el-avatar>
                      <span class="user-name">{{ scope.row.user?.name }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="content" label="评论内容" min-width="300">
                  <template #default="scope">
                    <div class="comment-content">
                      <div class="comment-text">{{ scope.row.content }}</div>
                      <div class="comment-actions" style="margin-top: 8px; display: flex; gap: 8px;">
                        <el-button 
                          size="mini" 
                          type="primary" 
                          @click="editComment(scope.row)"
                          style="background: #409EFF; color: white; border: none; padding: 4px 8px; font-size: 12px;"
                        >
                          编辑
                        </el-button>
                        <el-button 
                          size="mini" 
                          type="danger" 
                          @click="deleteComment(scope.row)"
                          style="background: #F56C6C; color: white; border: none; padding: 4px 8px; font-size: 12px;"
                        >
                          删除
                        </el-button>
                        <el-button 
                          size="mini" 
                          :type="scope.row.status === 'approved' ? 'warning' : 'success'"
                          @click="toggleCommentStatus(scope.row)"
                          style="border: none; padding: 4px 8px; font-size: 12px;"
                        >
                          {{ scope.row.status === 'approved' ? '拒绝' : '审核' }}
                        </el-button>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="video.title" label="视频" width="150">
                  <template #default="scope">
                    <div class="video-info">
                      <span class="video-title">{{ scope.row.video?.title }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                  <template #default="scope">
                    <el-tag :type="getCommentStatusType(scope.row.status)">
                      {{ getCommentStatusText(scope.row.status) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="likes" label="点赞数" width="100">
                  <template #default="scope">
                    <el-tag type="info">{{ scope.row.likes || 0 }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="created_at" label="评论时间" width="150">
                  <template #default="scope">
                    {{ formatDate(scope.row.created_at) }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100" fixed="right">
                  <template #default>
                    <div style="text-align: center; color: #999; font-size: 12px;">
                      操作按钮在评论内容中
                    </div>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页 -->
              <div class="pagination-section">
                <el-pagination
                  :current-page="commentCurrentPage"
                  :page-size="commentPageSize"
                  :page-sizes="[10, 20, 50, 100]"
                  :total="commentTotal"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleCommentSizeChange"
                  @current-change="handleCommentCurrentChange"
                />
              </div>
            </el-card>
          </div>

          <!-- 系统设置 -->
          <div v-if="activeMenu === 'settings'" class="settings-management">
            <el-card>
              <template #header>
                <div class="card-header">
                <span>系统设置</span>
                  <el-button type="primary" @click="saveSettings">
                    <el-icon><Check /></el-icon>
                    保存设置
                  </el-button>
                </div>
              </template>
              
              <el-form :model="settingsForm" label-width="120px">
                <el-row :gutter="20">
                  <el-col :span="12">
                <el-form-item label="网站名称">
                      <el-input v-model="settingsForm.site_name" />
                </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="最大上传大小">
                      <el-input v-model="settingsForm.max_upload_size" />
                    </el-form-item>
                  </el-col>
                </el-row>
                
                <el-form-item label="网站描述">
                  <el-input v-model="settingsForm.site_description" type="textarea" :rows="3" />
                </el-form-item>
                
                <el-form-item label="支持格式">
                  <el-select v-model="settingsForm.allowed_formats" multiple placeholder="选择支持的视频格式">
                    <el-option label="MP4" value="mp4" />
                    <el-option label="AVI" value="avi" />
                    <el-option label="MOV" value="mov" />
                    <el-option label="WMV" value="wmv" />
                    <el-option label="FLV" value="flv" />
                  </el-select>
                </el-form-item>
                
                <el-divider content-position="left">功能开关</el-divider>
                
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="自动审核视频">
                      <el-switch v-model="settingsForm.auto_approve_videos" />
                </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="启用评论">
                      <el-switch v-model="settingsForm.enable_comments" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="启用评分">
                      <el-switch v-model="settingsForm.enable_ratings" />
                    </el-form-item>
                  </el-col>
                </el-row>
                
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="维护模式">
                      <el-switch v-model="settingsForm.maintenance_mode" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="开放注册">
                      <el-switch v-model="settingsForm.registration_enabled" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="邮件通知">
                      <el-switch v-model="settingsForm.email_notifications" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
          </div>

          <!-- 系统日志 -->
          <div v-if="activeMenu === 'logs'" class="logs-management">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>系统日志</span>
                  <el-button type="danger" @click="clearLogs">
                    <el-icon><Delete /></el-icon>
                    清理日志
                  </el-button>
                </div>
              </template>
              <el-table :data="logs" style="width: 100%">
                <el-table-column prop="timestamp" label="时间" width="180">
                  <template #default="scope">
                    {{ formatDateTime(scope.row.timestamp) }}
                  </template>
                </el-table-column>
                <el-table-column prop="level" label="级别" width="100">
                  <template #default="scope">
                    <el-tag :type="getLogLevelType(scope.row.level)">
                      {{ scope.row.level.toUpperCase() }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="message" label="消息" min-width="300" />
                <el-table-column prop="user" label="用户" width="120" />
              </el-table>
            </el-card>
          </div>

          <!-- 系统监控 -->
          <div v-if="activeMenu === 'health'" class="health-management">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>系统监控</span>
                  <el-button @click="refreshHealth">
                    <el-icon><Refresh /></el-icon>
                    刷新状态
                  </el-button>
                </div>
              </template>
              <el-row :gutter="20">
                <el-col :span="6" v-for="(service, key) in systemHealth" :key="key">
                  <el-card class="health-card">
                    <div class="health-header">
                      <h4>{{ getServiceName(key) }}</h4>
                      <el-tag :type="service.status === 'healthy' ? 'success' : 'danger'">
                        {{ service.status === 'healthy' ? '正常' : '异常' }}
                      </el-tag>
                    </div>
                    <div class="health-details">
                      <div v-for="(value, detailKey) in service" :key="detailKey" class="health-item" v-show="detailKey !== 'status'">
                        <span class="label">{{ getDetailLabel(detailKey) }}:</span>
                        <span class="value">{{ value }}</span>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-card>
          </div>
        </el-main>
      </el-container>

      <!-- 视频添加/编辑对话框 -->
      <el-dialog
        v-model="showAddVideoDialog"
        :title="editingVideo ? '编辑视频' : '添加视频'"
        width="800px"
        @close="resetVideoForm"
      >
        <el-form :model="videoForm" :rules="videoRules" ref="videoFormRef" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="视频标题" prop="title">
                <el-input v-model="videoForm.title" placeholder="请输入视频标题" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分类" prop="category_id">
                <el-select v-model="videoForm.category_id" placeholder="选择分类" style="width: 100%">
                  <el-option
                    v-for="category in categories"
                    :key="category.id"
                    :label="category.name"
                    :value="category.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="视频描述" prop="description">
            <el-input
              v-model="videoForm.description"
              type="textarea"
              :rows="3"
              placeholder="请输入视频描述"
            />
          </el-form-item>
          
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="缩略图" prop="thumbnail">
                <el-input v-model="videoForm.thumbnail" placeholder="图片URL" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="视频URL" prop="video_url">
                <el-input v-model="videoForm.video_url" placeholder="视频URL" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="时长" prop="duration">
                <el-input v-model="videoForm.duration" placeholder="如: 01:30:00" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="播放量" prop="views">
                <el-input-number v-model="videoForm.views" :min="0" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="点赞数" prop="likes">
                <el-input-number v-model="videoForm.likes" :min="0" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态" prop="status">
                <el-select v-model="videoForm.status" style="width: 100%">
                  <el-option label="已发布" value="published" />
                  <el-option label="草稿" value="draft" />
                  <el-option label="审核中" value="pending" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="推荐">
            <el-switch v-model="videoForm.is_featured" />
          </el-form-item>
        </el-form>
        
        <template #footer>
          <el-button @click="showAddVideoDialog = false">取消</el-button>
          <el-button type="primary" @click="saveVideo" :loading="videoSaving">
            {{ editingVideo ? '更新' : '添加' }}
          </el-button>
        </template>
      </el-dialog>

      <!-- 用户添加/编辑对话框 -->
      <el-dialog
        v-model="showAddUserDialog"
        :title="editingUser ? '编辑用户' : '添加用户'"
        width="600px"
        @close="resetUserForm"
      >
        <el-form :model="userForm" :rules="userRules" ref="userFormRef" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="用户名" prop="name">
                <el-input v-model="userForm.name" placeholder="请输入用户名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="userForm.email" placeholder="请输入邮箱" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="密码" prop="password" v-if="!editingUser">
            <el-input 
              v-model="userForm.password" 
              type="password" 
              placeholder="请输入密码"
              show-password
            />
          </el-form-item>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="等级" prop="level">
                <el-select v-model="userForm.level" style="width: 100%">
                  <el-option label="普通用户" value="user" />
                  <el-option label="VIP用户" value="vip" />
                  <el-option label="管理员" value="admin" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <el-select v-model="userForm.status" style="width: 100%">
                  <el-option label="正常" value="active" />
                  <el-option label="禁用" value="disabled" />
                  <el-option label="待审核" value="pending" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="头像">
            <el-input v-model="userForm.avatar" placeholder="头像URL" />
          </el-form-item>
        </el-form>
        
        <template #footer>
          <el-button @click="showAddUserDialog = false">取消</el-button>
          <el-button type="primary" @click="saveUser" :loading="userSaving">
            {{ editingUser ? '更新' : '添加' }}
          </el-button>
        </template>
      </el-dialog>

      <!-- 分类添加/编辑对话框 -->
      <el-dialog
        v-model="showAddCategoryDialog"
        :title="editingCategory ? '编辑分类' : '添加分类'"
        width="500px"
        @close="resetCategoryForm"
      >
        <el-form :model="categoryForm" :rules="categoryRules" ref="categoryFormRef" label-width="100px">
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="categoryForm.name" placeholder="请输入分类名称" />
          </el-form-item>
          
          <el-form-item label="描述">
            <el-input
              v-model="categoryForm.description"
              type="textarea"
              :rows="3"
              placeholder="请输入分类描述"
            />
          </el-form-item>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="排序">
                <el-input-number v-model="categoryForm.sort_order" :min="0" :max="999" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态">
                <el-switch v-model="categoryForm.is_active" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        
        <template #footer>
          <el-button @click="showAddCategoryDialog = false">取消</el-button>
          <el-button type="primary" @click="saveCategory" :loading="categorySaving">
            {{ editingCategory ? '更新' : '添加' }}
          </el-button>
        </template>
      </el-dialog>

      <!-- 评论编辑对话框 -->
      <el-dialog
        v-model="showAddCommentDialog"
        :title="editingComment ? '编辑评论' : '添加评论'"
        width="600px"
        @close="resetCommentForm"
      >
        <el-form :model="commentForm" :rules="commentRules" ref="commentFormRef" label-width="100px">
          <el-form-item label="评论内容" prop="content">
            <el-input
              v-model="commentForm.content"
              type="textarea"
              :rows="4"
              placeholder="请输入评论内容"
              maxlength="500"
              show-word-limit
            />
          </el-form-item>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="视频" prop="video_id">
                <el-select v-model="commentForm.video_id" placeholder="选择视频" style="width: 100%">
                  <el-option
                    v-for="video in videos"
                    :key="video.id"
                    :label="video.title"
                    :value="video.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户" prop="user_id">
                <el-select v-model="commentForm.user_id" placeholder="选择用户" style="width: 100%">
                  <el-option
                    v-for="user in users"
                    :key="user.id"
                    :label="user.name"
                    :value="user.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="状态">
            <el-select v-model="commentForm.status" style="width: 100%">
              <el-option label="待审核" value="pending" />
              <el-option label="已审核" value="approved" />
              <el-option label="已拒绝" value="rejected" />
            </el-select>
          </el-form-item>
        </el-form>
        
        <template #footer>
          <el-button @click="showAddCommentDialog = false">取消</el-button>
          <el-button type="primary" @click="saveComment" :loading="commentSaving">
            {{ editingComment ? '更新' : '添加' }}
          </el-button>
        </template>
      </el-dialog>
    </el-container>

    <!-- 添加/编辑视频对话框 -->
    <el-dialog
      v-model="showAddVideoDialog"
      :title="editingVideo ? '编辑视频' : '添加视频'"
      width="600px"
    >
      <el-form :model="videoForm" label-width="100px">
        <el-form-item label="标题" required>
          <el-input v-model="videoForm.title" placeholder="请输入视频标题" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="videoForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入视频描述"
          />
        </el-form-item>
        <el-form-item label="分类" required>
          <el-select v-model="videoForm.category_id" placeholder="请选择分类" style="width: 100%">
            <el-option
              v-for="category in categories"
              :key="category.id"
              :label="category.name"
              :value="category.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时长">
          <el-input v-model="videoForm.duration" placeholder="如：02:15:30" />
        </el-form-item>
        <el-form-item label="缩略图">
          <el-input v-model="videoForm.thumbnail" placeholder="图片URL" />
        </el-form-item>
        <el-form-item label="视频链接">
          <el-input v-model="videoForm.video_url" placeholder="视频URL" />
        </el-form-item>
        <el-form-item label="推荐">
          <el-switch v-model="videoForm.is_featured" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddVideoDialog = false">取消</el-button>
        <el-button type="primary" @click="saveVideo">保存</el-button>
      </template>
    </el-dialog>

    <!-- 添加/编辑轮播图对话框 -->
    <el-dialog
      v-model="showAddBannerDialog"
      :title="editingBanner ? '编辑轮播图' : '添加轮播图'"
      width="600px"
      @close="resetBannerForm"
    >
      <el-form :model="bannerForm" :rules="bannerRules" ref="bannerFormRef" label-width="100px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="bannerForm.title" placeholder="请输入轮播图标题" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="bannerForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入轮播图描述"
          />
        </el-form-item>
        <el-form-item label="图片" prop="image">
          <el-input v-model="bannerForm.image" placeholder="图片URL" />
        </el-form-item>
        <el-form-item label="链接">
          <el-input v-model="bannerForm.link" placeholder="点击跳转链接" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
        <el-form-item label="排序">
              <el-input-number v-model="bannerForm.sort_order" :min="0" :max="999" style="width: 100%" />
        </el-form-item>
          </el-col>
          <el-col :span="12">
        <el-form-item label="启用">
          <el-switch v-model="bannerForm.is_active" />
        </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="showAddBannerDialog = false">取消</el-button>
        <el-button type="primary" @click="saveBanner" :loading="bannerSaving">
          {{ editingBanner ? '更新' : '添加' }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/utils/axios'
import {
  ElContainer,
  ElAside,
  ElHeader,
  ElMain,
  ElMenu,
  ElMenuItem,
  ElIcon,
  ElCard,
  ElRow,
  ElCol,
  ElTable,
  ElTableColumn,
  ElButton,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElTimeline,
  ElTimelineItem,
  ElForm,
  ElFormItem,
  ElInput,
  ElDialog,
  ElSelect,
  ElOption,
  ElSwitch,
  ElTag
} from 'element-plus'
import {
  Monitor,
  User,
  CaretRight,
  Grid,
  ChatDotRound,
  Setting,
  SwitchButton,
  Avatar,
  ArrowDown,
  View,
  Plus,
  Picture,
  ArrowUp,
  Minus,
  Document,
  Check,
  Close,
  Search,
  Refresh
} from '@element-plus/icons-vue'

const router = useRouter()
const activeMenu = ref('dashboard')

// 管理员信息
const adminUser = ref({
  name: 'Admin',
  email: 'admin@example.com',
  avatar: '/images/avatars/admin.jpg'
})

// 统计数据
const stats = reactive({
  totalUsers: 1256,
  totalVideos: 342,
  totalViews: 125680,
  totalComments: 8924
})

// 最近活动
const recentActivities = ref([
  { id: 1, content: '用户 "张三" 注册了账号', time: '2024-01-15 10:30' },
  { id: 2, content: '视频 "精彩电影" 被上传', time: '2024-01-15 09:15' },
  { id: 3, content: '用户 "李四" 发表了评论', time: '2024-01-15 08:45' },
  { id: 4, content: '分类 "动作片" 被创建', time: '2024-01-14 16:20' }
])

// 用户数据
const users = ref([])

// 视频数据
const videos = ref([])
const selectedVideos = ref([])

// 分类数据
const categories = ref([])

// 评论数据
const comments = ref([])

// 轮播图数据
const banners = ref([])

// 视频管理相关数据
const videoLoading = ref(false)
const videoSearchKeyword = ref('')
const videoCategoryFilter = ref('')
const videoStatusFilter = ref('')
const videoCurrentPage = ref(1)
const videoPageSize = ref(10)
const videoTotal = ref(0)
const videoSaving = ref(false)
const showAddVideoDialog = ref(false)
const editingVideo = ref(null)
const videoFormRef = ref(null)

// 视频表单
const videoForm = reactive({
  title: '',
  description: '',
  category_id: '',
  thumbnail: '',
  video_url: '',
  duration: '',
  views: 0,
  likes: 0,
  status: 'published',
  is_featured: false
})

// 视频表单验证规则
const videoRules = {
  title: [
    { required: true, message: '请输入视频标题', trigger: 'blur' }
  ],
  category_id: [
    { required: true, message: '请选择分类', trigger: 'change' }
  ],
  duration: [
    { required: true, message: '请输入视频时长', trigger: 'blur' }
  ]
}

// 用户管理相关数据
const userLoading = ref(false)
const userSearchKeyword = ref('')
const userStatusFilter = ref('')
const userLevelFilter = ref('')
const userCurrentPage = ref(1)
const userPageSize = ref(10)
const userTotal = ref(0)
const userSaving = ref(false)
const showAddUserDialog = ref(false)
const editingUser = ref(null)
const userFormRef = ref(null)
const selectedUsers = ref([])

// 用户表单
const userForm = reactive({
  name: '',
  email: '',
  password: '',
  level: 'user',
  status: 'active',
  avatar: ''
})

// 用户表单验证规则
const userRules = {
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ]
}

// 分类管理相关数据
const categoryLoading = ref(false)
const categorySearchKeyword = ref('')
const categoryCurrentPage = ref(1)
const categoryPageSize = ref(10)
const categoryTotal = ref(0)
const categorySaving = ref(false)
const showAddCategoryDialog = ref(false)
const editingCategory = ref(null)
const categoryFormRef = ref(null)
const selectedCategories = ref([])

// 分类表单
const categoryForm = reactive({
  name: '',
  description: '',
  sort_order: 0,
  is_active: true
})

// 分类表单验证规则
const categoryRules = {
  name: [
    { required: true, message: '请输入分类名称', trigger: 'blur' }
  ]
}

// 评论管理相关数据
const commentLoading = ref(false)
const commentSearchKeyword = ref('')
const commentStatusFilter = ref('')
const commentVideoFilter = ref('')
const commentCurrentPage = ref(1)
const commentPageSize = ref(10)
const commentTotal = ref(0)
const commentSaving = ref(false)
const showAddCommentDialog = ref(false)
const editingComment = ref(null)
const commentFormRef = ref(null)
const selectedComments = ref([])

// 评论表单
const commentForm = reactive({
  content: '',
  video_id: '',
  user_id: '',
  status: 'pending'
})

// 评论表单验证规则
const commentRules = {
  content: [
    { required: true, message: '请输入评论内容', trigger: 'blur' },
    { min: 1, max: 500, message: '评论内容长度在1到500个字符', trigger: 'blur' }
  ],
  video_id: [
    { required: true, message: '请选择视频', trigger: 'change' }
  ]
}

// 轮播图管理相关数据
const bannerLoading = ref(false)
const bannerSearchKeyword = ref('')
const bannerStatusFilter = ref('')
const bannerCurrentPage = ref(1)
const bannerPageSize = ref(10)
const bannerTotal = ref(0)
const bannerSaving = ref(false)
const showAddBannerDialog = ref(false)
const editingBanner = ref(null)
const bannerFormRef = ref(null)
const selectedBanners = ref([])

// 轮播图表单
const bannerForm = reactive({
  title: '',
  description: '',
  image: '',
  link: '',
  sort_order: 0,
  is_active: true
})

// 轮播图表单验证规则
const bannerRules = {
  title: [
    { required: true, message: '请输入轮播图标题', trigger: 'blur' }
  ],
  image: [
    { required: true, message: '请输入图片URL', trigger: 'blur' }
  ]
}

// 系统设置
const settingsForm = reactive({
  site_name: '腾讯视频管理系统',
  site_description: '专业的视频管理平台',
  max_upload_size: '100MB',
  allowed_formats: ['mp4', 'avi', 'mov', 'wmv'],
  auto_approve_videos: false,
  enable_comments: true,
  enable_ratings: true,
  maintenance_mode: false,
  registration_enabled: true,
  email_notifications: true
})

// 系统日志
const logs = ref([])

// 系统健康状态
const systemHealth = ref({})

// 最近活动
const recentActivity = ref([
  {
    title: '新用户注册',
    description: '用户 "张三" 刚刚注册了账号',
    time: '2分钟前',
    type: 'success'
  },
  {
    title: '视频上传',
    description: '用户 "李四" 上传了新视频 "精彩内容"',
    time: '15分钟前',
    type: 'primary'
  },
  {
    title: '评论审核',
    description: '管理员审核了3条新评论',
    time: '1小时前',
    type: 'warning'
  },
  {
    title: '系统更新',
    description: '系统配置已更新',
    time: '2小时前',
    type: 'info'
  }
])

// 对话框状态
const showAddUser = ref(false)
const showAddCategory = ref(false)

// 获取页面标题
const getPageTitle = () => {
  const titles = {
    dashboard: '仪表盘',
    users: '用户管理',
    videos: '视频管理',
    categories: '分类管理',
    banners: '轮播图管理',
    comments: '评论管理',
    settings: '系统设置'
  }
  return titles[activeMenu.value] || '管理后台'
}

// 菜单选择
const handleMenuSelect = (index) => {
  activeMenu.value = index
}

// 下拉菜单命令
const handleCommand = (command) => {
  if (command === 'logout') {
    logout()
  } else if (command === 'profile') {
    ElMessage.info('个人资料功能开发中...')
  }
}

// 退出登录
const logout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    localStorage.removeItem('adminToken')
    localStorage.removeItem('userType')
    ElMessage.success('已退出登录')
    router.push('/login')
  })
}

// 用户管理操作
const deleteUser = (user) => {
  ElMessageBox.confirm(`确定要删除用户 "${user.name}" 吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const response = await api.delete(`/admin/users/${user.id}`)
      if (response.success) {
        ElMessage.success('用户删除成功')
        loadUsers() // 重新加载用户列表
      } else {
        ElMessage.error(response.message || '用户删除失败')
      }
    } catch (error) {
      ElMessage.error('用户删除失败')
    }
  })
}

// 视频管理操作
const deleteVideo = (video) => {
  ElMessageBox.confirm(`确定要删除视频 "${video.title}" 吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const response = await api.delete(`/admin/videos/${video.id}`)
      if (response.success) {
        ElMessage.success('视频删除成功')
        loadVideos() // 重新加载视频列表
      } else {
        ElMessage.error(response.message || '视频删除失败')
      }
    } catch (error) {
      ElMessage.error('视频删除失败')
    }
  })
}

// 计算属性
const filteredVideos = computed(() => {
  let filtered = videos.value

  // 搜索过滤
  if (videoSearchKeyword.value) {
    filtered = filtered.filter(video => 
      video.title.toLowerCase().includes(videoSearchKeyword.value.toLowerCase())
    )
  }

  // 分类过滤
  if (videoCategoryFilter.value) {
    filtered = filtered.filter(video => 
      video.category_id === videoCategoryFilter.value
    )
  }

  // 状态过滤
  if (videoStatusFilter.value) {
    filtered = filtered.filter(video => 
      video.status === videoStatusFilter.value
    )
  }

  return filtered
})

// 用户过滤计算属性
const filteredUsers = computed(() => {
  let filtered = users.value

  // 搜索过滤
  if (userSearchKeyword.value) {
    filtered = filtered.filter(user => 
      user.name.toLowerCase().includes(userSearchKeyword.value.toLowerCase()) ||
      user.email.toLowerCase().includes(userSearchKeyword.value.toLowerCase())
    )
  }

  // 状态过滤
  if (userStatusFilter.value) {
    filtered = filtered.filter(user => 
      user.status === userStatusFilter.value
    )
  }

  // 等级过滤
  if (userLevelFilter.value) {
    filtered = filtered.filter(user => 
      user.level === userLevelFilter.value
    )
  }

  return filtered
})

// 分类过滤计算属性
const filteredCategories = computed(() => {
  let filtered = categories.value

  // 搜索过滤
  if (categorySearchKeyword.value) {
    filtered = filtered.filter(category => 
      category.name.toLowerCase().includes(categorySearchKeyword.value.toLowerCase())
    )
  }

  return filtered
})

// 评论过滤计算属性
const filteredComments = computed(() => {
  let filtered = comments.value

  // 搜索过滤
  if (commentSearchKeyword.value) {
    filtered = filtered.filter(comment => 
      comment.content.toLowerCase().includes(commentSearchKeyword.value.toLowerCase())
    )
  }

  // 状态过滤
  if (commentStatusFilter.value) {
    filtered = filtered.filter(comment => 
      comment.status === commentStatusFilter.value
    )
  }

  // 视频过滤
  if (commentVideoFilter.value) {
    filtered = filtered.filter(comment => 
      comment.video_id === commentVideoFilter.value
    )
  }

  return filtered
})

// 轮播图过滤计算属性
const filteredBanners = computed(() => {
  let filtered = banners.value

  // 搜索过滤
  if (bannerSearchKeyword.value) {
    filtered = filtered.filter(banner => 
      banner.title.toLowerCase().includes(bannerSearchKeyword.value.toLowerCase())
    )
  }

  // 状态过滤
  if (bannerStatusFilter.value) {
    const isActive = bannerStatusFilter.value === 'true'
    filtered = filtered.filter(banner => 
      banner.is_active === isActive
    )
  }

  return filtered
})

// 轮播图管理方法
const searchBanners = () => {
  // 搜索逻辑已在计算属性中处理
}

const handleBannerSelectionChange = (selection) => {
  selectedBanners.value = selection
}

const handleBannerSizeChange = (val) => {
  bannerPageSize.value = val
  loadBanners()
}

const handleBannerCurrentChange = (val) => {
  bannerCurrentPage.value = val
  loadBanners()
}

const editBanner = (banner) => {
  editingBanner.value = banner
  Object.assign(bannerForm, {
    title: banner.title,
    description: banner.description || '',
    image: banner.image,
    link: banner.link || '',
    sort_order: banner.sort_order || 0,
    is_active: banner.is_active
  })
  showAddBannerDialog.value = true
}

const toggleBannerStatus = async (banner) => {
  try {
    const newStatus = !banner.is_active
    const response = await api.put(`/admin/banners/${banner.id}/status`, {
      is_active: newStatus
    })
    if (response.success) {
      banner.is_active = newStatus
      ElMessage.success(newStatus ? '轮播图已启用' : '轮播图已禁用')
    } else {
      ElMessage.error(response.message || '操作失败')
    }
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

const resetBannerForm = () => {
  editingBanner.value = null
  Object.assign(bannerForm, {
    title: '',
    description: '',
    image: '',
    link: '',
    sort_order: 0,
    is_active: true
  })
  if (bannerFormRef.value) {
    bannerFormRef.value.resetFields()
  }
}

const saveBanner = async () => {
  try {
    bannerSaving.value = true
    
    // 表单验证
    if (!bannerFormRef.value) return
    await bannerFormRef.value.validate()
    
    if (editingBanner.value) {
      // 更新轮播图
      const response = await api.put(`/admin/banners/${editingBanner.value.id}`, bannerForm)
      if (response.success) {
        ElMessage.success('轮播图更新成功')
        showAddBannerDialog.value = false
        resetBannerForm()
        loadBanners()
      } else {
        ElMessage.error(response.message || '轮播图更新失败')
      }
    } else {
      // 添加轮播图
      const response = await api.post('/admin/banners', bannerForm)
      if (response.success) {
        ElMessage.success('轮播图添加成功')
        showAddBannerDialog.value = false
        resetBannerForm()
        loadBanners()
      } else {
        ElMessage.error(response.message || '轮播图添加失败')
      }
    }
  } catch (error) {
    console.error('保存轮播图失败:', error)
    ElMessage.error('保存轮播图失败')
  } finally {
    bannerSaving.value = false
  }
}

// 评论管理方法
const searchComments = () => {
  // 搜索逻辑已在计算属性中处理
}

const handleCommentSelectionChange = (selection) => {
  selectedComments.value = selection
}

const handleCommentSizeChange = (val) => {
  commentPageSize.value = val
  loadComments()
}

const handleCommentCurrentChange = (val) => {
  commentCurrentPage.value = val
  loadComments()
}

const getCommentStatusType = (status) => {
  switch (status) {
    case 'approved': return 'success'
    case 'pending': return 'warning'
    case 'rejected': return 'danger'
    default: return 'info'
  }
}

const getCommentStatusText = (status) => {
  switch (status) {
    case 'approved': return '已审核'
    case 'pending': return '待审核'
    case 'rejected': return '已拒绝'
    default: return '未知'
  }
}

const editComment = (comment) => {
  editingComment.value = comment
  Object.assign(commentForm, {
    content: comment.content,
    video_id: comment.video_id,
    user_id: comment.user_id,
    status: comment.status
  })
  showAddCommentDialog.value = true
}

const toggleCommentStatus = async (comment) => {
  try {
    const newStatus = comment.status === 'approved' ? 'rejected' : 'approved'
    const response = await api.put(`/admin/comments/${comment.id}/status`, {
      status: newStatus
    })
    if (response.success) {
      comment.status = newStatus
      ElMessage.success(newStatus === 'approved' ? '评论已审核通过' : '评论已拒绝')
    } else {
      ElMessage.error(response.message || '操作失败')
    }
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

const batchApproveComments = async () => {
  try {
    const commentIds = selectedComments.value.map(comment => comment.id)
    const response = await api.post('/admin/comments/batch-approve', {
      comment_ids: commentIds
    })
    if (response.success) {
      selectedComments.value.forEach(comment => {
        comment.status = 'approved'
      })
      ElMessage.success('批量审核成功')
    } else {
      ElMessage.error(response.message || '批量审核失败')
    }
  } catch (error) {
    ElMessage.error('批量审核失败')
  }
}

const batchRejectComments = async () => {
  try {
    const commentIds = selectedComments.value.map(comment => comment.id)
    const response = await api.post('/admin/comments/batch-reject', {
      comment_ids: commentIds
    })
    if (response.success) {
      selectedComments.value.forEach(comment => {
        comment.status = 'rejected'
      })
      ElMessage.success('批量拒绝成功')
    } else {
      ElMessage.error(response.message || '批量拒绝失败')
    }
  } catch (error) {
    ElMessage.error('批量拒绝失败')
  }
}

const resetCommentForm = () => {
  editingComment.value = null
  Object.assign(commentForm, {
    content: '',
    video_id: '',
    user_id: '',
    status: 'pending'
  })
  if (commentFormRef.value) {
    commentFormRef.value.resetFields()
  }
}

const saveComment = async () => {
  try {
    commentSaving.value = true
    
    // 表单验证
    if (!commentFormRef.value) return
    await commentFormRef.value.validate()
    
    if (editingComment.value) {
      // 更新评论
      const response = await api.put(`/admin/comments/${editingComment.value.id}`, commentForm)
      if (response.success) {
        ElMessage.success('评论更新成功')
        showAddCommentDialog.value = false
        resetCommentForm()
        loadComments()
      } else {
        ElMessage.error(response.message || '评论更新失败')
      }
    } else {
      // 添加评论
      const response = await api.post('/admin/comments', commentForm)
      if (response.success) {
        ElMessage.success('评论添加成功')
        showAddCommentDialog.value = false
        resetCommentForm()
        loadComments()
      } else {
        ElMessage.error(response.message || '评论添加失败')
      }
    }
  } catch (error) {
    console.error('保存评论失败:', error)
    ElMessage.error('保存评论失败')
  } finally {
    commentSaving.value = false
  }
}

// 分类管理方法
const searchCategories = () => {
  // 搜索逻辑已在计算属性中处理
}

const handleCategorySelectionChange = (selection) => {
  selectedCategories.value = selection
}

const handleCategorySizeChange = (val) => {
  categoryPageSize.value = val
  loadCategories()
}

const handleCategoryCurrentChange = (val) => {
  categoryCurrentPage.value = val
  loadCategories()
}

const editCategory = (category) => {
  editingCategory.value = category
  Object.assign(categoryForm, {
    name: category.name,
    description: category.description || '',
    sort_order: category.sort_order || 0,
    is_active: category.is_active
  })
  showAddCategoryDialog.value = true
}

const toggleCategoryStatus = async (category) => {
  try {
    const newStatus = !category.is_active
    const response = await api.put(`/admin/categories/${category.id}/status`, {
      is_active: newStatus
    })
    if (response.success) {
      category.is_active = newStatus
      ElMessage.success(newStatus ? '分类已启用' : '分类已禁用')
    } else {
      ElMessage.error(response.message || '操作失败')
    }
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

const resetCategoryForm = () => {
  editingCategory.value = null
  Object.assign(categoryForm, {
    name: '',
    description: '',
    sort_order: 0,
    is_active: true
  })
  if (categoryFormRef.value) {
    categoryFormRef.value.resetFields()
  }
}

const saveCategory = async () => {
  try {
    categorySaving.value = true
    
    // 表单验证
    if (!categoryFormRef.value) return
    await categoryFormRef.value.validate()
    
    if (editingCategory.value) {
      // 更新分类
      const response = await api.put(`/admin/categories/${editingCategory.value.id}`, categoryForm)
      if (response.success) {
        ElMessage.success('分类更新成功')
        showAddCategoryDialog.value = false
        resetCategoryForm()
        loadCategories()
      } else {
        ElMessage.error(response.message || '分类更新失败')
      }
    } else {
      // 添加分类
      const response = await api.post('/admin/categories', categoryForm)
      if (response.success) {
        ElMessage.success('分类添加成功')
        showAddCategoryDialog.value = false
        resetCategoryForm()
        loadCategories()
      } else {
        ElMessage.error(response.message || '分类添加失败')
      }
    }
  } catch (error) {
    console.error('保存分类失败:', error)
    ElMessage.error('保存分类失败')
  } finally {
    categorySaving.value = false
  }
}

// 用户管理方法
const searchUsers = () => {
  // 搜索逻辑已在计算属性中处理
}

const handleUserSelectionChange = (selection) => {
  selectedUsers.value = selection
}

const handleUserSizeChange = (val) => {
  userPageSize.value = val
  loadUsers()
}

const handleUserCurrentChange = (val) => {
  userCurrentPage.value = val
  loadUsers()
}

const getUserLevelType = (level) => {
  switch (level) {
    case 'admin': return 'danger'
    case 'vip': return 'warning'
    case 'user': return 'info'
    default: return 'info'
  }
}

const getUserLevelText = (level) => {
  switch (level) {
    case 'admin': return '管理员'
    case 'vip': return 'VIP'
    case 'user': return '普通用户'
    default: return '未知'
  }
}

const getUserStatusType = (status) => {
  switch (status) {
    case 'active': return 'success'
    case 'disabled': return 'danger'
    case 'pending': return 'warning'
    default: return 'info'
  }
}

const getUserStatusText = (status) => {
  switch (status) {
    case 'active': return '正常'
    case 'disabled': return '禁用'
    case 'pending': return '待审核'
    default: return '未知'
  }
}

const editUser = (user) => {
  editingUser.value = user
  Object.assign(userForm, {
    name: user.name,
    email: user.email,
    password: '', // 编辑时不显示密码
    level: user.level,
    status: user.status,
    avatar: user.avatar || ''
  })
  showAddUserDialog.value = true
}

const toggleUserStatus = async (user) => {
  try {
    const newStatus = user.status === 'active' ? 'disabled' : 'active'
    const response = await api.put(`/admin/users/${user.id}/status`, {
      status: newStatus
    })
    if (response.success) {
      user.status = newStatus
      ElMessage.success(newStatus === 'active' ? '用户已启用' : '用户已禁用')
    } else {
      ElMessage.error(response.message || '操作失败')
    }
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

const resetUserForm = () => {
  editingUser.value = null
  Object.assign(userForm, {
    name: '',
    email: '',
    password: '',
    level: 'user',
    status: 'active',
    avatar: ''
  })
  if (userFormRef.value) {
    userFormRef.value.resetFields()
  }
}

const saveUser = async () => {
  try {
    userSaving.value = true
    
    // 表单验证
    if (!userFormRef.value) return
    await userFormRef.value.validate()
    
    if (editingUser.value) {
      // 更新用户
      const response = await api.put(`/admin/users/${editingUser.value.id}`, userForm)
      if (response.success) {
        ElMessage.success('用户更新成功')
        showAddUserDialog.value = false
        resetUserForm()
        loadUsers()
      } else {
        ElMessage.error(response.message || '用户更新失败')
      }
    } else {
      // 添加用户
      const response = await api.post('/admin/users', userForm)
      if (response.success) {
        ElMessage.success('用户添加成功')
        showAddUserDialog.value = false
        resetUserForm()
        loadUsers()
      } else {
        ElMessage.error(response.message || '用户添加失败')
      }
    }
  } catch (error) {
    console.error('保存用户失败:', error)
    ElMessage.error('保存用户失败')
  } finally {
    userSaving.value = false
  }
}

// 视频管理方法
const searchVideos = () => {
  // 搜索逻辑已在计算属性中处理
}

const handleVideoSizeChange = (val) => {
  videoPageSize.value = val
  loadVideos()
}

const handleVideoCurrentChange = (val) => {
  videoCurrentPage.value = val
  loadVideos()
}

const getVideoStatusType = (status) => {
  switch (status) {
    case 'published': return 'success'
    case 'draft': return 'warning'
    case 'pending': return 'info'
    default: return 'info'
  }
}

const getVideoStatusText = (status) => {
  switch (status) {
    case 'published': return '已发布'
    case 'draft': return '草稿'
    case 'pending': return '审核中'
    default: return '未知'
  }
}

const formatViews = (views) => {
  if (views >= 10000) {
    return (views / 10000).toFixed(1) + '万'
  }
  return views.toString()
}

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

const editVideo = (video) => {
  editingVideo.value = video
  Object.assign(videoForm, {
    title: video.title,
    description: video.description,
    category_id: video.category_id,
    thumbnail: video.thumbnail,
    video_url: video.video_url,
    duration: video.duration,
    views: video.views,
    likes: video.likes,
    status: video.status,
    is_featured: video.is_featured
  })
  showAddVideoDialog.value = true
}

const toggleFeatured = async (video) => {
  try {
    const response = await api.put(`/admin/videos/${video.id}/featured`, {
      is_featured: !video.is_featured
    })
    if (response.success) {
      video.is_featured = !video.is_featured
      ElMessage.success(video.is_featured ? '已设为推荐' : '已取消推荐')
    } else {
      ElMessage.error(response.message || '操作失败')
    }
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

const saveVideo = async () => {
  try {
    videoSaving.value = true
    
    // 表单验证
    if (!videoFormRef.value) return
    await videoFormRef.value.validate()
    
    if (editingVideo.value) {
      // 更新视频
      const response = await api.put(`/admin/videos/${editingVideo.value.id}`, videoForm)
      if (response.success) {
        ElMessage.success('视频更新成功')
        showAddVideoDialog.value = false
        resetVideoForm()
        loadVideos()
      } else {
        ElMessage.error(response.message || '视频更新失败')
      }
    } else {
      // 添加视频
      const response = await api.post('/admin/videos', videoForm)
      if (response.success) {
        ElMessage.success('视频添加成功')
        showAddVideoDialog.value = false
        resetVideoForm()
        loadVideos()
      } else {
        ElMessage.error(response.message || '视频添加失败')
      }
    }
  } catch (error) {
    console.error('保存视频失败:', error)
    ElMessage.error('保存视频失败')
  } finally {
    videoSaving.value = false
  }
}

const resetVideoForm = () => {
  videoForm.title = ''
  videoForm.description = ''
  videoForm.category_id = null
  videoForm.duration = ''
  videoForm.thumbnail = ''
  videoForm.video_url = ''
  videoForm.is_featured = false
  editingVideo.value = null
}

// 批量操作
const handleVideoSelectionChange = (selection) => {
  selectedVideos.value = selection
}

const batchSetFeatured = async () => {
  if (selectedVideos.value.length === 0) {
    ElMessage.warning('请先选择要操作的视频')
    return
  }
  
  try {
    const videoIds = selectedVideos.value.map(video => video.id)
    const response = await api.post('/admin/batch', {
      action: 'set_featured',
      type: 'videos',
      ids: videoIds
    })
    
    if (response.success) {
      ElMessage.success(`成功设置 ${videoIds.length} 个视频为推荐`)
      loadVideos()
      selectedVideos.value = []
    } else {
      ElMessage.error(response.message || '批量操作失败')
    }
  } catch (error) {
    ElMessage.error('批量操作失败')
  }
}

const batchUnsetFeatured = async () => {
  if (selectedVideos.value.length === 0) {
    ElMessage.warning('请先选择要操作的视频')
    return
  }
  
  try {
    const videoIds = selectedVideos.value.map(video => video.id)
    const response = await api.post('/admin/batch', {
      action: 'unset_featured',
      type: 'videos',
      ids: videoIds
    })
    
    if (response.success) {
      ElMessage.success(`成功取消 ${videoIds.length} 个视频的推荐`)
      loadVideos()
      selectedVideos.value = []
    } else {
      ElMessage.error(response.message || '批量操作失败')
    }
  } catch (error) {
    ElMessage.error('批量操作失败')
  }
}

// 分类管理操作
const deleteCategory = (category) => {
  ElMessageBox.confirm(`确定要删除分类 "${category.name}" 吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('分类删除成功')
  })
}

// 轮播图管理操作
const deleteBanner = (banner) => {
  ElMessageBox.confirm(`确定要删除轮播图 "${banner.title}" 吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const response = await api.delete(`/admin/banners/${banner.id}`)
      if (response.success) {
        ElMessage.success('轮播图删除成功')
        loadBanners() // 重新加载轮播图列表
      } else {
        ElMessage.error(response.message || '轮播图删除失败')
      }
    } catch (error) {
      ElMessage.error('轮播图删除失败')
    }
  })
}

// 评论管理操作
const deleteComment = (comment) => {
  ElMessageBox.confirm(`确定要删除这条评论吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('评论删除成功')
  })
}

// 保存系统设置
const saveSettings = async () => {
  try {
    await api.put('/admin/settings', settingsForm)
  ElMessage.success('设置保存成功')
  } catch (error) {
    ElMessage.error('保存设置失败')
  }
}

// 加载系统设置
const loadSettings = async () => {
  try {
    const response = await api.get('/admin/settings')
      if (response.success) {
      Object.assign(settingsForm, response.data)
    }
  } catch (error) {
    console.error('加载系统设置失败:', error)
  }
}

// 加载系统日志
const loadLogs = async () => {
  try {
    const response = await api.get('/admin/logs')
    if (response.success) {
      logs.value = response.data
    }
  } catch (error) {
    console.error('加载系统日志失败:', error)
  }
}

// 清理系统日志
const clearLogs = async () => {
  try {
    await ElMessageBox.confirm('确定要清理所有系统日志吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
      type: 'warning',
    })
    
    await api.delete('/admin/logs')
    logs.value = []
    ElMessage.success('系统日志清理成功')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('清理系统日志失败')
    }
  }
}

// 加载系统健康状态
const loadSystemHealth = async () => {
  try {
    const response = await api.get('/admin/health')
    if (response.success) {
      systemHealth.value = response.data
    }
  } catch (error) {
    console.error('加载系统健康状态失败:', error)
  }
}

// 刷新系统健康状态
const refreshHealth = () => {
  loadSystemHealth()
}

// 格式化日期时间
const formatDateTime = (timestamp) => {
  return new Date(timestamp).toLocaleString('zh-CN')
}

// 获取日志级别类型
const getLogLevelType = (level) => {
  const typeMap = {
    'info': 'info',
    'warning': 'warning',
    'error': 'danger',
    'success': 'success'
  }
  return typeMap[level] || 'info'
}

// 获取服务名称
const getServiceName = (key) => {
  const nameMap = {
    'database': '数据库',
    'cache': '缓存',
    'storage': '存储',
    'api': 'API服务'
  }
  return nameMap[key] || key
}

// 获取详情标签
const getDetailLabel = (key) => {
  const labelMap = {
    'response_time': '响应时间',
    'connections': '连接数',
    'hit_rate': '命中率',
    'memory_usage': '内存使用',
    'disk_usage': '磁盘使用',
    'free_space': '剩余空间',
    'requests_per_minute': '每分钟请求'
  }
  return labelMap[key] || key
}

// 导航方法
const goToVideos = () => {
  console.log('点击视频管理，切换到videos页面')
  activeMenu.value = 'videos'
}

const goToUsers = () => {
  console.log('点击用户管理，切换到users页面')
  activeMenu.value = 'users'
}

const goToCategories = () => {
  console.log('点击分类管理，切换到categories页面')
  activeMenu.value = 'categories'
}

const goToComments = () => {
  console.log('点击评论管理，切换到comments页面')
  activeMenu.value = 'comments'
}

const goToBanners = () => {
  console.log('点击轮播图管理，切换到banners页面')
  activeMenu.value = 'banners'
}

const goToSettings = () => {
  console.log('点击系统设置，切换到settings页面')
  activeMenu.value = 'settings'
}

const goToAddVideo = () => {
  showAddVideoDialog.value = true
}

const goToAddUser = () => {
  showAddUser.value = true
}

// 刷新所有数据
const refreshAll = async () => {
  await Promise.all([
    loadStats(),
    loadUsers(),
    loadVideos(),
    loadCategories(),
    loadComments(),
    loadBanners(),
    loadSettings(),
    loadLogs(),
    loadSystemHealth()
  ])
  ElMessage.success('数据刷新完成')
}

// 加载最近活动
const loadRecentActivity = () => {
  // 这里可以从API加载真实的最近活动数据
  ElMessage.success('最近活动已刷新')
}

// 加载数据
const loadStats = async () => {
  try {
    const response = await api.get('/admin/stats')
    if (response.success) {
      Object.assign(stats, response.data)
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

const loadUsers = async () => {
  try {
    const response = await api.get('/admin/users')
    if (response.success) {
      users.value = response.data
    }
  } catch (error) {
    console.error('加载用户数据失败:', error)
  }
}

const loadVideos = async () => {
  try {
    const response = await api.get('/admin/videos')
    if (response.success) {
      videos.value = response.data
    }
  } catch (error) {
    console.error('加载视频数据失败:', error)
  }
}

const loadCategories = async () => {
  try {
    const response = await api.get('/admin/categories')
    if (response.success) {
      categories.value = response.data
    }
  } catch (error) {
    console.error('加载分类数据失败:', error)
  }
}

const loadComments = async () => {
  try {
    const response = await api.get('/admin/comments')
    if (response.success) {
      comments.value = response.data
    }
  } catch (error) {
    console.error('加载评论数据失败:', error)
  }
}

const loadBanners = async () => {
  try {
    const response = await api.get('/admin/banners')
    if (response.success) {
      banners.value = response.data
    }
  } catch (error) {
    console.error('加载轮播图数据失败:', error)
  }
}

// 监听activeMenu变化
watch(activeMenu, (newValue, oldValue) => {
  console.log(`页面切换: ${oldValue} -> ${newValue}`)
  console.log('当前activeMenu值:', newValue)
  console.log('页面内容应该显示:', newValue)
}, { immediate: true })

onMounted(() => {
  // 检查管理员权限
  const adminToken = localStorage.getItem('adminToken')
  const userType = localStorage.getItem('userType')
  
  console.log('AdminView onMounted - 检查认证信息:')
  console.log('adminToken:', adminToken)
  console.log('userType:', userType)
  
  if (!adminToken || userType !== 'admin') {
    ElMessage.error('请先登录管理员账号')
    router.push('/login')
    return
  }

  console.log('认证通过，开始加载数据...')

  // 加载数据
  loadStats()
  loadUsers()
  loadVideos()
  loadCategories()
  loadComments()
  loadBanners()
  loadSettings()
  loadLogs()
  loadSystemHealth()
})
</script>

<style scoped>
.admin-container {
  min-height: 100vh;
  background: #f5f5f5;
}

.admin-sidebar {
  background: #2c3e50;
  color: white;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
}

.sidebar-header {
  padding: 30px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}

.logo-icon {
  font-size: 28px;
  color: #ffd700;
}

.sidebar-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.sidebar-header p {
  margin: 0 0 20px 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

.admin-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.admin-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.admin-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.admin-role {
  font-size: 0.8rem;
  opacity: 0.8;
  color: #ffd700;
}

.admin-menu {
  border: none;
  background: transparent;
}

.admin-menu .el-menu-item {
  color: #bdc3c7;
  border-radius: 0;
}

.admin-menu .el-menu-item:hover,
.admin-menu .el-menu-item.is-active {
  background: #34495e;
  color: #ecf0f1;
}

.sidebar-footer {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
}

.admin-header {
  background: white;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  margin-left: 250px;
}

.header-left h3 {
  margin: 0;
  color: #2c3e50;
}

.admin-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #2c3e50;
}

.admin-main {
  margin-left: 250px;
  padding: 20px;
  background: #f5f5f5;
  min-height: calc(100vh - 60px);
  position: relative;
  z-index: 1001;
}

.stat-card {
  margin-bottom: 20px;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: white;
}

.stat-icon.users {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.videos {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-icon.views {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon.comments {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-info h3 {
  margin: 0 0 5px 0;
  font-size: 24px;
  color: #2c3e50;
}

.stat-info p {
  margin: 0;
  color: #7f8c8d;
  font-size: 14px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recent-activity {
  background: white;
}

@media (max-width: 768px) {
  .admin-sidebar {
    width: 200px;
  }
  
  .admin-header {
    margin-left: 200px;
  }
  
  .admin-main {
    margin-left: 200px;
  }
}

/* 系统监控样式 */
.health-card {
  margin-bottom: 20px;
}

.health-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.health-header h4 {
  margin: 0;
  color: #333;
  font-size: 16px;
}

.health-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.health-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #f0f0f0;
}

.health-item:last-child {
  border-bottom: none;
}

.health-item .label {
  font-weight: 500;
  color: #666;
  font-size: 14px;
}

.health-item .value {
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

/* 日志管理样式 */
.logs-management .el-table {
  margin-top: 20px;
}

/* 系统设置样式 */
.settings-management .el-form {
  max-width: 800px;
}

.settings-management .el-divider {
  margin: 30px 0 20px 0;
}

/* 仪表板样式 */
.dashboard-content {
  padding: 20px;
}

.welcome-section {
  margin-bottom: 30px;
}

.welcome-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 40px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.welcome-content {
  flex: 1;
}

.welcome-title {
  font-size: 2.5rem;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 15px;
}

.welcome-icon {
  font-size: 2.5rem;
  color: #ffd700;
}

.welcome-subtitle {
  font-size: 1.2rem;
  margin: 0 0 30px 0;
  opacity: 0.9;
}

.welcome-actions {
  display: flex;
  gap: 15px;
}

.welcome-image {
  flex-shrink: 0;
}

.dashboard-icon {
  font-size: 120px;
  color: rgba(255, 255, 255, 0.2);
}

.stats-section {
  margin-bottom: 30px;
}

.stat-card {
  transition: all 0.3s ease;
  cursor: pointer;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.users-card {
  border-left: 4px solid #409eff;
}

.videos-card {
  border-left: 4px solid #67c23a;
}

.categories-card {
  border-left: 4px solid #e6a23c;
}

.comments-card {
  border-left: 4px solid #f56c6c;
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.users-card .stat-icon {
  background: linear-gradient(135deg, #409eff, #66b1ff);
}

.videos-card .stat-icon {
  background: linear-gradient(135deg, #67c23a, #85ce61);
}

.categories-card .stat-icon {
  background: linear-gradient(135deg, #e6a23c, #ebb563);
}

.comments-card .stat-icon {
  background: linear-gradient(135deg, #f56c6c, #f78989);
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.stat-label {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
}

.stat-change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.stat-change.positive {
  color: #67c23a;
}

.stat-change.negative {
  color: #f56c6c;
}

.stat-change.neutral {
  color: #909399;
}

.quick-actions-section {
  margin-bottom: 30px;
}

.quick-action-item {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #f0f0f0;
}

.quick-action-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #409eff;
}

.action-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  flex-shrink: 0;
}

.videos-icon {
  background: linear-gradient(135deg, #409eff, #66b1ff);
}

.users-icon {
  background: linear-gradient(135deg, #67c23a, #85ce61);
}

.categories-icon {
  background: linear-gradient(135deg, #e6a23c, #ebb563);
}

.comments-icon {
  background: linear-gradient(135deg, #f56c6c, #f78989);
}

.banners-icon {
  background: linear-gradient(135deg, #909399, #b1b3b8);
}

.settings-icon {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.action-content {
  flex: 1;
}

.action-content h3 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 18px;
}

.action-content p {
  margin: 0 0 15px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.recent-activity-section {
  margin-bottom: 30px;
}

/* 轮播图管理样式 */
.banner-content {
  padding: 8px 0;
}

.banner-title {
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
}

.banner-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.banner-actions .el-button {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s;
}

.banner-actions .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 视频管理样式 */
.video-content {
  padding: 8px 0;
}

.video-title {
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
}

.video-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.video-actions .el-button {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s;
}

.video-actions .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 用户管理样式 */
.user-content {
  padding: 8px 0;
}

.user-name {
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.user-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.user-actions .el-button {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s;
}

.user-actions .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 评论管理样式 */
.comment-content {
  padding: 8px 0;
}

.comment-text {
  margin-bottom: 8px;
  line-height: 1.5;
  color: #333;
}

.comment-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.comment-actions .el-button {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s;
}

.comment-actions .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .welcome-card {
    flex-direction: column;
    text-align: center;
  }
  
  .welcome-actions {
    justify-content: center;
  }
  
  .dashboard-icon {
    font-size: 80px;
  }
}

@media (max-width: 768px) {
  .welcome-title {
    font-size: 2rem;
  }
  
  .welcome-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .stat-content {
    flex-direction: column;
    text-align: center;
  }
  
  .quick-action-item {
    flex-direction: column;
    text-align: center;
  }
}
</style>
